<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="<c:url value='/js/jquery.min.js'/>"></script>
<script src="<c:url value='/js/jquery.form.js'/>"></script>
<script type="text/javascript">
function valid() {
	$("#div_number").removeClass("control-group error");
	$("#div_number").addClass("control-group span9");
	var number = $("[name='equipment_number']").val().trim();
	//alert("name"+name+"cnName"+cnName+"cnName"+cnName);
	if (number == "") {
		$("#div_number").removeClass("control-group");
		$("#div_number").addClass("control-group error");
		$("#help_number").html("数字不能为空");
		return false;
	}
	return true;
}
</script>
<div>
    <div class="">
            <ul class="breadcrumb">
                <li>
                    <h3 style="margin-top: auto">
                        <c:out value="${project.name}"></c:out>
                        <span class="divider">/</span>
                    </h3>
                </li>
                <li><h3>显控设计模式 <span class="divider">/</span></h3></li>
                <li class="active"><h3><a href="#">IO通信</a> <span class="divider">/</span></h3></li>
            </ul>
    </div>
    <hr  />
	<!-- div class="tabbable">
		<div class="tabbable" style="margin-bottom: 18px;">
			<ul class="nav nav-tabs">
			    <li class=""><a href="" data-toggle="pill"><h3>实体数据区</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>总线通信</h3></a></li>
				<li class="active"><a href="" data-toggle="pill"><h3>IO通信</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>信息显示</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>控制响应</h3></a></li>

			</ul>
			<div class="tab-content"
				style="padding-bottom: 9px; border-bottom: 1px solid #ddd;" -->
	       <div>
				<div class="tab-pane" id="tab5"></div>
				<div class="tab-pane" id="tab1"></div>
				<div class="tab-pane active form-horizontal" id="tab2">
					<div align="right" class="span9">
					<input type="hidden" name="dpcUri" value="${dpcUri}"></input>
					 <c:choose>
                        <c:when test="${isEdit}" >
						<a class="btn"
							href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/BUS/edit"><i class="icon-arrow-left"></i> 上一步</a>
						<a class="btn"
							href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/DISPLAY/edit"><i class="icon-arrow-right"></i> 下一步</a>
				        </c:when>
				        <c:otherwise>
				             <a class="btn"
                                href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/BUS/scan"><i class="icon-arrow-left"></i> 上一步</a>
                            <a class="btn"
                                href="/ManEnv/designPatternCategory/${project.id}/design_pattern_component/DISPLAY/scan"><i class="icon-arrow-right"></i> 下一步</a>
				        </c:otherwise>
				    </c:choose>
					   <a class="btn"
                            href="/ManEnv/designPatternCategory/list"><i class="icon-circle-arrow-left" ></i> 返回</a>
					</div>

					<div class="control-group span7">
						<label class="control-label" for="">设计模式实例名称</label>
						<div class="controls">
							<span class="uneditable-input input-large"><c:out
									value="${dpiName}"></c:out></span>
						</div>
					</div>


					<div class="control-group span7">
						<label class="control-label" for="IO_device">IO设备</label>
						<div class="controls">
							<table class="table table-bordered table-striped table-hover"
								id="io_devices_table">
								<thead>
									<tr>
										<th>#</th>
										<th>设备</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${exist_equipments}" var="equipment"
											varStatus="status">
											<tr>
												<td>${status.count}</td>
												 <td>${equipment.name}</td>
												<td>
													<div class="btn-group">
														<button class="btn" name="view_equipment"
															data-target="#dp_component_info_panel"
															data-toggle="modal"data-backdrop="false"><i class="icon-search"></i> 详细</button>
													 <c:choose>
                                                        <c:when test="${isEdit}" >
														<button class="btn" name="delete_equipment"><i class="icon-trash"></i> 删除</button>
													</c:when>
													</c:choose>
														<input type="hidden" value="${equipment.uri}" />
													
													</div>
												</td>
											</tr>
										</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
                 <c:choose>
                 <c:when test="${isEdit}" >
					<div class="span9">
						<h4>添加新IO设备</h4>
						<hr>
						<form action="<%=request.getContextPath()%>/ioDesignPattern/designPatternCategory/add" method="post" onsubmit="return valid()">
							<input type="hidden" name="dpiName" value="${dpiName}"></input> <input
								type="hidden" name="dpcUri" value="${dpcUri}"></input> <input
								type="hidden" name="projectId" value="${project.id}"></input>

							<div class="control-group span9">
								<label class="control-label" for="equipment">IO设备</label>
								<div class="controls">
									<select name="equipment">
										<c:forEach items="${equipments}" var="equipment">
											<option value="${equipment.uri}">
												<c:out value="${equipment.name}"></c:out>
											</option>
										</c:forEach>
									</select>
								</div>
							</div>
							<div class="control-group span9" id="div_number">
								<label class="control-label" for="equipment_number">设备号</label>
								<div class="controls">
									<input type="text" name="equipment_number" placeholder="0">
									<span class="help-inline" id="help_number">${errormsg}</span>
								</div>
							</div>
							<div class="control-group span9">
								<label class="control-label" for="bus_type">内部总线类型</label>
								<div class="controls">
									<select name="bus_type">
										<c:forEach items="${inner_buses}" var="equipment">
											<option value="${equipment.uri}">
												<c:out value="${equipment.name}"></c:out>
											</option>
										</c:forEach>
									</select>
								</div>
							</div>
							<div class="control-group span9">
								<div class="controls">
									<button type="submit" class="btn"><i class="icon-ok"></i> 确认</button>
								</div>
							</div>
						</form>
					</div>
					 </c:when>
                 </c:choose>

				</div>
				<!-- div class="tab-pane" id="tab3"></div>
				<div class="tab-pane" id="tab4"></div>
			</div>
		</div -->
		<!-- /tabbable -->
	</div>
</div>


<div class="modal hide fade" id="dp_component_info_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>IO组件详细信息</h3>
	</div>
	<div class="modal-body">
		<table class="table table-hover" style="width: 80%">
			<thead>
				<tr>
					<th style="width: 30%">属性</th>
					<th style="width: 70%">详细信息</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>设备名称</td>
					<td><span id="inner_equipment_info"></span></td>
				</tr>
				<tr>
					<td>总线类型</td>
					<td><span id="bus_type_info"></span></td>
				</tr>
				<tr>
					<td>外部设备号</td>
					<td><span id="equipment_number_info"></span></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="modal-footer">
		<button class="btn" id="view_io_device_info"><i class="icon-ok"></i> 确定</button>
	</div>
</div>


<div class="modal hide fade" id="add_io_device_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加IO设备</h3>
	</div>
	<div class="modal-body form-horizontal">
		<div class="control-group">
			<label class="control-label" for="io_device">IO设备</label>
			<div class="controls">
				<select id="io_device">
					<c:forEach items="${equipments}" var="equipment">
						<option value="${equipment.uri}">
							<c:out value="${equipment.name}"></c:out>
						</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="device_num">设备号</label>
			<div class="controls">
				<input type="text" id="device_num" placeholder="0">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="bus_type">内部总线类型</label>
			<div class="controls">
				<select id="bus_type">
					<c:forEach items="${equipments}" var="equipment">
						<option value="${equipment.uri}">
							<c:out value="${equipment.name}"></c:out>
						</option>
					</c:forEach>
				</select>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn" id="add_io_device_btn"><i class="icon-ok"></i> 保存</button>
		<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
	</div>
</div>
<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<c:url value='/js/editIODesignPatternComponent.js'/>"></script>
<script src="<c:url value='/js/bootstrap.file-input.js'/>"></script>
